<template>
  <v-chart ref="chart" class="chart" :option="option" />
</template>

<script>
// import chinaJSON from '@/assets/json/china2'
// import * as echarts from 'echarts'
// echarts.registerMap('china', chinaJSON)
export default {
  name: 'MapChart',
  props: ['rData'],
  data() {
    return {
      option: {
        color: ['#007AFF', '#5ac7a9', '#85C89D', '#f7c241', '#e06d67', '#85C89D', '#fc8452', '#9a60b4', '#ea7ccc'],
        tooltip: {
          trigger: 'item'
        },
        xAxis: {
          show: false
        },
        yAxis: {
          show: false
        },
        geo: {
          map: 'china'
          // itemStyle: {					// 定义样式
          //   normal: {					// 普通状态下的样式
          //     areaColor: '#c3cbf9',
          //     borderColor: '#fff'
          //   },
          //   emphasis: {					// 高亮状态下的样式
          //     areaColor: '#d6defc'
          //   }
          // },
          // label: {
          //   show: true,
          //   backgroundColor: 'rgba(0,0,0,.6)',
          //   padding: 3,
          //   borderRadius: 4,
          //   color: '#fff',
          //   emphasis: {					// 高亮状态下的样式
          //     color: '#fff'
          //   }
          // }
        },
        series: [
          {
            type: 'map',
            map: 'china', // 自定义扩展图表类型
            label: {
              show: true,
              backgroundColor: 'rgba(0,0,0,.6)',
              padding: 3,
              borderRadius: 4,
              color: '#fff',
              emphasis: {					// 高亮状态下的样式
                color: '#fff'
              }
            },
            tooltip: {
              formatter: function(params) {
                return `${params.name}点赞数：${params.value || 0}`
              },
              borderWidth: 0,
              backgroundColor: 'rgba(0,0,0,.8)',
              textStyle: {
                color: '#fff',
                fontSize: 16
              }
            },
            itemStyle: {				// 定义样式
              normal: {					// 普通状态下的样式
                areaColor: '#c3cbf9',
                borderWidth: 1,
                borderColor: '#fff'
              },
              emphasis: {		// 高亮状态下的样式
                areaColor: '#d6defc'
              }
            },
            backgroundColor: '#404a59',
            data: [
              {
                name: '内蒙古',
                value: 100,
                itemStyle: {
                  areaColor: '#3258f8'
                },
                emphasis: {
                  itemStyle: {
                    areaColor: '#3258f8'
                  }
                }
              },
              {
                name: '黑龙江',
                value: 100,
                itemStyle: {
                  areaColor: '#3258f8'
                },
                emphasis: {
                  itemStyle: {
                    areaColor: '#3258f8'
                  }
                }
              },
              {
                name: '四川',
                value: 100,
                itemStyle: {
                  areaColor: '#3258f8'
                },
                emphasis: {
                  itemStyle: {
                    areaColor: '#3258f8'
                  }
                }
              },
              {
                name: '河南',
                value: 100,
                itemStyle: {
                  areaColor: '#3258f8'
                },
                emphasis: {
                  itemStyle: {
                    areaColor: '#3258f8'
                  }
                }
              },
              {
                name: '山东',
                value: 100,
                itemStyle: {
                  areaColor: '#3258f8'
                },
                emphasis: {
                  itemStyle: {
                    areaColor: '#3258f8'
                  }
                }
              },
              {
                name: '湖北',
                value: 100,
                itemStyle: {
                  areaColor: '#3258f8'
                },
                emphasis: {
                  itemStyle: {
                    areaColor: '#3258f8'
                  }
                }
              },
              {
                name: '重庆',
                value: 100,
                itemStyle: {
                  areaColor: '#3258f8'
                },
                emphasis: {
                  itemStyle: {
                    areaColor: '#3258f8'
                  }
                }
              },
              {
                name: '江西',
                value: 100,
                itemStyle: {
                  areaColor: '#3258f8'
                },
                emphasis: {
                  itemStyle: {
                    areaColor: '#3258f8'
                  }
                }
              },
              {
                name: '广东',
                value: 100,
                itemStyle: {
                  areaColor: '#3258f8'
                },
                emphasis: {
                  itemStyle: {
                    areaColor: '#3258f8'
                  }
                }
              },
              {
                name: '福建',
                value: 100,
                itemStyle: {
                  areaColor: '#3258f8'
                },
                emphasis: {
                  itemStyle: {
                    areaColor: '#3258f8'
                  }
                }
              },
              {
                name: '浙江',
                value: 100,
                itemStyle: {
                  areaColor: '#3258f8'
                },
                emphasis: {
                  itemStyle: {
                    areaColor: '#3258f8'
                  }
                }
              }
            ]
          },
          {
            name: '试点城市',
            type: 'scatter',
            coordinateSystem: 'geo',
            data: [
              {
                name: '北京中关村软件园',
                value: [ // 数据项值
                  116.46, // 地理坐标，经度
                  39.92, // 地理坐标，纬度
                  193821 // 数值
                ]
              },
              { name: '内蒙古巴彦淖尔市', value: [107.40, 40.74, 14828] },
              { name: '山东青岛市', value: [120.38, 36.07, 308433] },
              { name: '江西南昌国家高新区', value: [115.97, 28.70, 25646] },
              { name: '湖北武汉市东湖新技术开发区', value: ['114.44', '30.44', 388814] },
              { name: '山西吕梁市', value: ['111.15', '37.53', 451] },
              { name: '黑龙江七台河市', value: ['131.00', '45.78', 1177] },
              { name: '江苏无锡市', value: ['120.32', '31.49', 512] },
              { name: '浙江宁波市', value: ['121.63', '29.86', 15352] },
              { name: '浙江嘉兴市', value: ['120.75', '30.75', 33522] },
              { name: '安徽铜陵市', value: ['117.86', '30.94', 169] },
              { name: '福建泉州市', value: ['118.66', '24.88', 2544] },
              { name: '山东泰安市', value: ['117.09', '36.20', 2046] },
              { name: '河南濮阳市', value: ['115.02', '35.76', 65927] },
              { name: '湖北咸宁市', value: ['114.32', '29.84', 291968] },
              { name: '广东广州市', value: ['113.25', '23.14', 121151] },
              { name: '广东深圳市', value: ['114.08', '22.55', 96717] },
              { name: '广西壮族自治区南宁市', value: ['108.37', '22.82', 3744291] },
              { name: '宁夏回族自治区银川市', value: ['106.22', '38.49', 373999] },
              { name: '天津滨海新区', value: ['117.71', '39.00', 241663] },
              { name: '上海杨浦区', value: ['121.47', '31.23', 43550] },
              { name: '重庆永川区', value: ['105.91', '29.35', 2041980] },
              { name: '广西壮族自治区贵港市', value: ['109.60', '23.09', 86] },
              { name: '四川成都市', value: ['104.07', '30.66', 62174] },
              { name: '山东济南市', value: ['117.12', '36.66', 1060] },
              { name: '内蒙古包头市', value: ['109.84', '40.66', 200635] },
              { name: '重庆重庆高新技术产业开发区', value: ['106.34', '29.51', 1391291] },
              { name: '湖南长沙市', value: ['112.95', '28.23', 0] }
            ],
            symbol: 'image://',
            symbolSize: [14, 20],
            encode: {
              value: 2
            },
            tooltip: {
              show: true,
              formatter: function(params) {
                return params.name + '的点赞数:' + params.value[2]
              },
              borderWidth: 0,
              backgroundColor: 'rgba(0,0,0,.8)',
              textStyle: {
                color: '#fff',
                fontSize: 16
              }
            },
            label: {
              formatter: '{b}',
              position: 'right',
              show: false
            },
            emphasis: {
              label: {
                show: false,
                borderWidth: 0,
                fontSize: 16,
                color: '#fff',
                padding: [6, 6, 6, 6],
                backgroundColor: 'rgba(0,0,0,.8)',
                borderRadius: 4,
                formatter: '{b}:点赞数{@[2]}'
              }
            }
          }
        ]
      }
    }
  },
  methods: {
    resize() {
      this.$refs['chart'].resize()
    }
  }
}
</script>

<style>

</style>
